<template>
  <div>
    <!-- 收藏,购物车,加入购物车,立即购买 -->
    <van-goods-action>
      <van-goods-action-icon
        icon="star-o"
        :text="val"
        @click="fn"
        :color="color"
      />
      <van-goods-action-icon
        icon="cart-o"
        :badge="shopNum"
        text="购物车"
        @click="fun"
      />
      <van-goods-action-button type="warning" text="加入购物车" @click="shop" />
      <van-goods-action-button type="danger" text="立即购买" @click="pay" />
    </van-goods-action>
    <!-- 底部弹出层 -->
    <van-action-sheet v-model="show" title="加入购物车">
      <div class="top">
        <div>
          <img :src="abtObj.list_pic_url" alt="" />
        </div>
        <h1><span>￥</span>{{ abtObj.retail_price }}元</h1>
        <h2>剩余&nbsp;{{ abtObj.goods_number }}&nbsp;件</h2>
        <h3>请选择</h3>
      </div>
      <div class="center">
        <p>
          <span> 购买数量 </span>
          <button
            class="right"
            @click="index++"
            :disabled="index == abtObj.goods_number"
          >
            +
          </button>
          <input type="text" v-model="index" />
          <button @click="index--" :disabled="index == 0">-</button>
        </p>
        <van-goods-action>
          <van-goods-action-button
            color="linear-gradient(to right,#ffd01e,#ff8917"
            type="danger"
            text="加入购物车"
            @click="add"
          />
          <van-goods-action-button type="danger" text="立即购买" />
        </van-goods-action>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import { Dialog, Toast } from "vant";
import { addShop, GetDetail, GetGoodscount } from "../https/http";
export default {
  name: "Action",
  methods: {
    pay() {
      if (!localStorage.getItem("token")) {
        Toast({
          message: "请先登录",
          duration: 1500,
        });
        return;
      }
      Toast({
        message: "跳转支付",
        duration: 1500,
      });
    },
    fun() {
      this.chanGe();
      this.$router.push({ name: "Cart" });
    },
    //点击收藏 收藏功能
    fn() {
      console.log("收藏事件");
      if (this.val == "收藏") {
        this.color = "red";
        this.val = "已收藏";
      } else if (this.val == "已收藏") {
        this.color = "waite";
        this.val = "收藏";
      }
    },
    shop() {
      this.show = !this.show;
    },
    add() {
      if (!localStorage.getItem("token")) {
        Toast(`请先登录`);
        return;
      }
      // 获取对应productId
      GetDetail({ id: this.abtObj.id })
        .then((res) => {
          console.log(22, res);
          this.num = res.data.productList[0].id;
          console.log(this.num);
        })
        .then(() => {
          let obj = {};
          obj.goodsId = this.abtObj.id;
          obj.productId = this.num;
          obj.number = this.index;
          console.log(obj);
          //   加入购物车
          addShop(obj).then((res) => {
            console.log("加入购物后获取", res);
            // debugger
            if (res.errno == 0) {
              Dialog.alert({
                message: "成功加入购物车",
              }).then(() => {
                this.show = !this.show;
              });
            }
            if (!res) {
              Dialog.alert({
                message: "请求超时",
              });
            }
            this.shopNum = res.data.cartTotal.goodsCount;
          });
          // .then(() => {
          //     // 重新获取数量
          //   GetGoodscount(localStorage.getItem("token")).then((res) => {
          //     console.log(res);
          //     debugger
          //     this.shopNum = res.data.cartTotal.goodsCount;
          //   });
          // });
        });
    },
    ...mapMutations(["chanGe"]),
  },
  data() {
    return {
      color: "waite",
      val: "收藏",
      show: false,
      index: 1,
      num: 0,
      shopNum: 0,
    };
  },
  props: ["abtObj", "id"],
  created() {
    GetGoodscount(localStorage.getItem("token")).then((res) => {
      console.log("获取初始购物车数量", res);
      this.shopNum = res.data.cartTotal.goodsCount;
    });
  },
};
</script>

<style scoped lang="less">
.top {
  height: 150px;
  width: 100%;

  position: relative;
  div {
    width: 96px;
    height: 96px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 14px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  h1 {
    display: block;
    position: absolute;
    font-size: 20px;
    top: 30px;
    left: 45%;
    color: red;
    transform: translateX(-50%);
    span {
      font-size: 16px;
    }
  }
  h2 {
    display: block;
    position: absolute;
    font-size: 12px;
    top: 72px;
    left: 45%;
    transform: translateX(-50%);
  }
  h3 {
    display: block;
    position: absolute;
    font-size: 12px;
    top: 102px;
    left: 41%;
    transform: translateX(-50%);
  }
}
.center {
  width: 100%;
  height: 150px;

  p {
    display: block;
    width: 100%;
    height: 40px;
    line-height: 40px;
    span {
      font-size: 15px;
      margin-left: 20px;
    }
    input {
      margin-top: 6.5px;
      height: 27px;
      width: 30px;
      float: right;
      background: rgb(239, 239, 239);
      text-align: center;
    }
    button {
      margin-top: 6.5px;
      height: 27px;
      outline: none;
      border: none;
      width: 27px;
      text-align: center;
      line-height: 27px;
      float: right;
      margin-left: 4px;
      margin-right: 4px;
    }
    .right {
      margin-right: 20px;
    }
  }
}
</style>